<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 25%;
            height: 25%;
            z-index: -1;
            position: absolute;
            transform: translate(-50%,-50%);
            transition-duration: 1s;
        }
    </style>
</head>
<body>
    <p>我是一段不被复制的文字</p>
    <img src="ts.jpg" alt="">
    <script>
        //禁止打开右键菜单
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        //禁止选中文字
        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })
        document.addEventListener('click',function(e){
            console.log(e.clientX); //相对于浏览器可视窗口的坐标
            console.log(e.clientY);
            console.log(e.screenX);//相对于电脑屏幕的坐标
            console.log(e.screenY);
            console.log(e.pageX);//相对于文档页面的坐标
            console.log(e.pageY);
        })
        document.addEventListener('mousemove',function(e){
            //只要移动鼠标 就会触发事件
            var x = e.pageX;
            var y = e.pageY;
            var img = document.querySelector('img');
            img.style.top = y+'px';
            img.style.left = x+'px';
        })
    //mouseenter和mouseover的区别
    //两者都是当鼠标移动到元素上时会触发事件
    //区别是 mouseover经过自身及子盒子都会触发
    //mouseenter只有经过自身会触发，其原因是没有冒泡事件
    //与mouseenter对应的是mouseleave事件
    //与mouseover对应的是mouseout事件
    </script>
</body>
</html>